<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  <title>number</title>
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> -->
	<style>
		/* *, html, body {
			margin: 0px;
			padding: 0px;
		} */
	 .box{
    position: relative;
    display: flex;
    justify-content: center;
    height: 800px;
    /* ios穿透遮罩 所以要用下面这个 */
    overflow: hidden; 
   }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .content{
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 10;
    width:750px;
    height:750px;
    animation: newCardShowAni .6s backwards linear;
    background-color:blue;
   }
  @keyframes newCardShowAni {
    0% {
      transform: rotateY(0) scale(0);
    }
  
    100% {
      transform: rotateY(-720deg) scale(1);
    }
  }
</style>
</head>
<body>
  <div class="box">
     <div class="mask"></div> 
     <div class="content"></div>
  </div>
</body>
</html>